<template>
  <div class="search-menu-container">
    <div class="inputs">
      <slot></slot>
    </div>
    <div class="buttons">
      <el-button type="primary" @click="handleSearch" class="button">检索</el-button>
      <el-button type="plain" @click="handleReset" class="button">重置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleSearch() {
      this.$emit("search");
    },
    handleReset() {
      this.$emit("reset");
    },
  },
};
</script>

<style lang="scss" scoped>
.search-menu-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  .inputs {
    display: flex;
    align-items: center;
    // flex: 1 0 100%;
  }
  .buttons {
    display: flex;
    // gap: 10px;
    .button {
        width: 80px;
        // margin: 0;
    }
  }
}
</style>
